<template>
    <div class="container-common homework-read-student-select">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>作业评阅</el-breadcrumb-item>
            <el-breadcrumb-item>作业概览</el-breadcrumb-item>
            <el-breadcrumb-item>作业提交情况</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button class="setting-rate" type="primary" @click="handleSetting">成绩比重设置</el-button>
        <el-button class="export-homework" type="primary" @click="handleExport">批量导出作业附件</el-button>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="学生姓名或组名">
            </el-table-column>
            <el-table-column
                    prop="score1"
                    label="互评成绩">
            </el-table-column>
            <el-table-column
                    prop="score2"
                    label="教师评分">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="240">
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="large"
                            @click="handleRead(scope.row)">评阅</el-button>
                    <el-button
                            type="text"
                            size="large"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="设置成绩比重"
                :visible.sync="settingDialogVisible"
                width="50%">
            <el-form
                    v-if="defaultSetting.length"
                    :model="settingForm"
                    status-icon
                    ref="settingForm"
                    label-width="100px">
                <el-form-item
                        v-for="item in defaultSetting"
                        :label="item.task_name"
                        :prop="'' + item.task_id"
                        :key="item.task_id">
                    <el-input
                            v-model="settingForm['' + item.task_id]"
                            autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSetting">取 消</el-button>
                <el-button type="primary" @click="confirmSetting">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="评阅"
                :visible.sync="evaluationDialogVisible"
                width="50%" class="evaluation-container">
            <div class="evaluation-container-item">
                <label>作业下载</label>
                <span v-if="currentData" style="margin-right: 20px">{{currentData.file}}</span><el-button type="primary" @click="download">下载</el-button>
            </div>
            <div v-if="currentData && currentData.isGroup" class="evaluation-container-item">
                <label>小组成员</label>
                <el-table
                        :data="evaluationTableData"
                        border
                        class="evaluation-table">
                    <el-table-column
                            prop="studentId"
                            label="学号">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                </el-table>
            </div>
            <div v-else  class="evaluation-container-item">
                <label>提交人</label>
                <span v-if="currentData && currentData.name">{{currentData.name}}</span>
            </div>
            <div class="evaluation-container-item">
                <label>评分</label>
                <el-input class="score-input" v-model="score"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEvaluation">取 消</el-button>
                <el-button type="primary" @click="confirmEvaluation">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogVisible"
                width="30%">
            <span v-if="currentData">确认删除作业{{currentData.id}}吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelDelete">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Api from '@utils/api';
    import { mapGetters } from 'vuex';

    export default {
        name: "studentSelect",
        props: ['task'],
        data () {
            return {
                tableData: [],
                currentData: null,
                settingDialogVisible: false,
                settingForm: {},
                defaultSetting: [],
                evaluationDialogVisible: false,
                evaluationTableData: [],
                deleteDialogVisible: false,
                score: ''
            }
        },
        computed: {
            ...mapGetters([
                'getCurrentCourseId'
            ])
        },
        methods: {
            download () {
                window.open('http://39.105.144.7:5002/api/download?UUID=' + this.currentData.file);
            },
            handleExport () {
                window.open('http://39.105.144.7:5002/api/download_homework?course_id=' + this.getCurrentCourseId);
            },
            handleRead (data) {
                this.currentData = data;

                if (this.currentData.member && this.currentData.isGroup) {
                    this.evaluationTableData = Object.keys(this.currentData.member).map(item => {
                        return {
                            studentId: item,
                            name: this.currentData.member[item]
                        }
                    });
                }

                this.evaluationDialogVisible = true;

            },
            handleDelete (data) {
                this.currentData = data;
                this.deleteDialogVisible = true;
            },
            handleSetting () {
                this.settingDialogVisible = true;
            },
            cancelSetting () {
                this.settingDialogVisible = false;
                this.resetSetting();
            },
            confirmSetting () {
                Api({
                    method: 'post',
                    url: '/setScoreRate',
                    data: this.settingForm
                }).then(() => {
                    this.$notify({
                        type: 'success',
                        title: '设置成功！'
                    });

                    this.settingDialogVisible = false;
                })
            },
            resetSetting () {
                this.defaultSetting.forEach(item => {
                    this.$set(this.settingForm, '' + item.task_id, item.task_percentage);
                });
            },
            cancelDelete () {
                this.deleteDialogVisible = false;
            },
            confirmDelete () {
                Api({
                    method: 'post',
                    url: '/deleteHomework',
                    data: {
                        homework_id: this.currentData.id
                    }
                }).then(() => {
                    this.$notify({
                        type: 'success',
                        title: '删除成功！'
                    });

                    this.deleteDialogVisible = false;
                    this.getTableData();
                });

            },
            cancelEvaluation () {
                this.evaluationDialogVisible = false;
                this.score = '';
            },
            confirmEvaluation () {
                Api({
                    method: 'post',
                    url: '/setScore',
                    params: {
                        homework_id: this.currentData.id,
                        score: this.score
                    }
                }).then(() => {
                    this.$notify({
                        title: '操作成功！',
                        type: 'success'
                    });

                    this.evaluationDialogVisible = false;
                });
            },
            getTableData () {
                Api({
                    method: 'get',
                    url: '/lookCommitList',
                    params: {
                        task_id: this.task
                    }
                }).then(res => {
                    if (res.data && res.data.data && res.data.data.length) {
                        this.tableData = res.data.data.map(item => {
                            return {
                                id: item.homework_id,
                                name: item.student,
                                score1: item.huping_score,
                                score2: item.teacher_score,
                                total: item.homework_score,
                                isGroup: item.if_group,
                                member: item.group_member,
                                file: item.homework_file
                            }
                        });
                    }
                })
            },
            getScoreRate () {
                Api({
                    method: 'get',
                    url: '/getScoreRate',
                    params: {
                        course_id: this.getCurrentCourseId
                    }
                }).then(res => {
                    if (res.data && res.data.data && res.data.data.length) {

                        res.data.data.forEach(item => {
                            this.$set(this.settingForm, '' + item.task_id, item.task_percentage);
                        });

                        this.defaultSetting = res.data.data;
                    }
                })
            }
        },
        created () {
            this.getTableData();
            this.getScoreRate();
        }
    }
</script>

<style type="text/scss" lang="scss">
    .homework-read-student-select {
        .setting-rate {
            margin-bottom: 20px;
        }
        .evaluation-container {
            &-item {
                margin-bottom: 20px;
            }
          label {
              color: #333;
              margin-right: 16px;
              display: inline-block;
              width: 60px;

          }
            .score-input {
                width: 80%;
            }
            .evaluation-table {
                width: 80%;
                display: inline-block;
                vertical-align: top;
            }
        }
    }
</style>